import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
import { AudDialogShowParams } from '@/pages/components/Aud/AudDialog';
import { Button, Popup, SelectBox } from 'devextreme-react';
import { Select } from 'antd';
import { intl } from '@/utils';
import { useModel } from 'umi';
import { updateCutOffDate } from './service';


const ToResetMonth: React.FC<any> = React.forwardRef((props: any, ref) => {

  const { Content, AccountDataID, TextValue, Data_ID, InfoState } = props

  const { initialState } = useModel('@@initialState');
  const { dbname } = initialState?.curPart as API.CurPart;
  const { username } = initialState?.curUser as API.CurUser;

  const refsForm = useRef<any>();
  const diaParams = useRef<AudDialogShowParams>();
  const [visible, setVisible] = useState<boolean>(false);
  const [PaperValue, setPaperValue] = useState<string>('')
  const [PaperMonth, setPaperMonth] = useState<any[]>([])
  const [Value, setValue] = useState<any>('')
  const [Data_IDs, setData_ID] = useState<any>('')

  useEffect(() => {
    if (TextValue) {
      const r = TextValue.toString()
      setData_ID(r.substr(0, 4))
      if (!TextValue) {
        let ars: any = []
        for (var i = 1; i <= 12; i++) {
          if (i < 10) {
            ars.push({
              byMonth: `${r.substr(0, 4)}${0}${i}`,
              ID: `${i - 1}`,
              ND: `${0}${i}`,
            })
          } else {
            ars.push({
              byMonth: `${r.substr(0, 4)}${i}`,
              ID: `${i - 1}`,
              ND: `${i}`,
            })
          }
        }
        setPaperMonth(ars);
      } else {
        let ars: any = []
        for (var i = 1; i <= 12; i++) {
          if (i < 10) {
            ars.push({
              byMonth: `${r.substr(0, 4)}${0}${i}`,
              ID: `${i - 1}`,
              ND: `${0}${i}`,
            })
          } else {
            ars.push({
              byMonth: `${r.substr(0, 4)}${i}`,
              ID: `${i - 1}`,
              ND: `${i}`,
            })
          }
        }
        setPaperMonth(ars);
      }
    }
  }, [TextValue])

  // 自定义方法
  useImperativeHandle(ref, () => ({
    show: async (params: AudDialogShowParams, SelectValue: string) => {
      diaParams.current = params;
      setVisible(true);
      setValue(SelectValue);
    },
    close: () => { setVisible(false) }
  }));

  const fetchData = async (byMonth: string) => {
    const res = await updateCutOffDate({
      dbname,
      Data_ID: Data_ID ? Data_ID : Data_IDs,
      byMonth,
      editUser: username
    })
    console.log(res, 'res------');
  };

  const onOk = useCallback(() => {
    setVisible(false)
    window.localStorage.setItem('setTextValue', PaperValue)
    Content(PaperValue)
    fetchData(PaperValue)
  }, [PaperValue])

  const onCancel = useCallback(() => {
    setVisible(false)
  }, [])

  // 获取列表的点击项 
  const onSelectionChangeds = useCallback((e: any) => {
    setPaperValue(e);
    setValue(e);
  }, [])

  return (
    <>
      <Popup
        ref={ref}
        visible={visible}
        title={diaParams.current?.args?.title}
        width={380}
        height={200}
        {...props}
        onHiding={() => setVisible(false)}
        toolbarItems={[
          {
            widget: 'dxButton',
            toolbar: 'bottom',
            location: 'after',
            options: {
              text: intl('pub.cancel', '取消'),
              onClick: () => onCancel()
            },
          },
          {
            widget: 'dxButton',
            toolbar: 'bottom',
            location: 'after',
            options: {
              text: intl('pub.ok', '确定'),
              type: 'default',
              onClick: () => onOk()
            },
          },
        ]}
        contentRender={() => (
          <div
            style={{
              display: 'flex',
              justifyContent: 'space-around',
              alignItems: 'center'
            }}
          >
            <Select
              value={Value}
              style={{ width: '100%' }}
              className='AntdSelect'
              options={(PaperMonth || []).map((d: any) => ({
                value: d.byMonth,
                label: d.byMonth,
              }))}
              onChange={onSelectionChangeds}
            />
          </div>
        )}
      />
    </>
  );
});

export default ToResetMonth